<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap"
        class="searchForm"
      >
        <FormItem label="用户名称/ID">
          <Input v-model="formItem.user" placeholder="请输入用户名称/ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="手机号码">
          <Input v-model="formItem.phone" placeholder="请输入手机号码" style="width:150px"></Input>
        </FormItem>
        <FormItem label="申请状态">
          <Select v-model="formItem.status" style="width:150px">
            <Option v-for="(item,index) in audiType" :key="index" :value="index+1">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="申请时间">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择开始时间" v-model="searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择结束时间" v-model="searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <!-- <FormItem label="用户类型">
          <Select v-model="formItem.input" style="width:150px">
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <FormItem label="是否关注公众号">
          <Select v-model="formItem.input" style="width:150px">
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>-->
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      newOne
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
    <Modal title="Title" v-model="modal10" width="800" class-name="vertical-center-modal">
      <div style="min-height:200px;">
        <Table
          :columns="detailCol"
          :data="detailData"
          style="max-height:400px;overflow-y:scroll;border:none"
          class="detailTable"
        ></Table>
      </div>
    </Modal>
    <Modal v-model="confirmOk" title="确认提现" @on-ok="resolve" @on-cancel="cancel">
      <p>确定通过提现吗？</p>
    </Modal>
    <Modal v-model="confirmNo" title="确认拒绝" @on-ok="resolve" @on-cancel="cancel">
      <p>确定拒绝提现吗？</p>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import {
  ApplyWithdrawList,
  ApplyWithdrawResolve,
  ApplyWithdrawReject
} from "api/recuit/user";

export default {
  name: "",
  data() {
    return {
      formItem: {
        user: "",
        phone: "",
        status: "",
        time: []
      },
      searchDataBegin: "",
      searchDataFinish: "",
      audiType: ["待处理", "已通过", "已拒绝"],
      columns: [
        {
          title: "登陆账号",
          key: "phone"
        },
        {
          title: "用户信息",
          key: "action",
          width: 250,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h("img", {
                  attrs: {
                    src: params.row.avatar_url
                  },
                  style: {
                    padding: "2px",
                    width: "80px",
                    height: "80px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                    }
                  }
                }),
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px"
                    }
                  },
                  params.row.nick_name
                )
              ]
            );
          }
        },
        {
          title: "本次申请",
          key: "amount"
        },
        {
          title: "累计申请",
          key: "accruing"
        },
        {
          title: "申请状态",
          key: "withdraw_status",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              this.audiType[params.row.withdraw_status - 1]
            );
          }
        },
        {
          title: "申请时间",
          key: "time_create",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              this.format(Number(params.row.time_create) * 1000)
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 300,
          align: "center",
          render: (h, params) => {
            if (params.row.withdraw_status == 1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        // this.show(params.index);
                        this.getLog(params.row.withdraw_apply_id);
                        this.modal10 = true;
                      }
                    }
                  },
                  "详情"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.withdraw_apply_id = params.row.withdraw_apply_id;
                        this.confirmOk = true;
                        // this.resolve(params.row.withdraw_apply_id);
                      }
                    }
                  },
                  "通过"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        // this.reject(params.row.withdraw_apply_id);
                        this.withdraw_apply_id = params.row.withdraw_apply_id;
                        this.confirmNo = ture;
                      }
                    }
                  },
                  "拒绝"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        // this.show(params.index);
                        debugger
                        this.getLog(params.row.withdraw_apply_id);
                        this.modal10 = true;
                      }
                    }
                  },
                  "详情"
                )
              ]);
            }
          }
        }
      ],

      data: [],
      detailCol: [
        {
          title: "操作时间",
          key: "time_create"
        },
        {
          title: "操作名称",
          key: "description"
        },
        {
          title: "金额",
          key: "change"
        }
      ],
      detailData: [],
      modal10: false,
      page: 0,
      pageNum: 20, //显示条数
      jobSum: 0, //职位总数
      pageTotal: 0, //页面总数
      confirmOk: false,
      comfirmNo: false,
      withdraw_apply_id: ""
    };
  },
  components: {
    TableList
  },

  mounted() {
    this.getData();
  },

  methods: {
    //切换页面
    changePage(data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //条件查询
    searchData() {
      this.formItem.time = [];
      this.formItem.time.push(this.searchDataBegin);
      this.formItem.time.push(this.searchDataFinish);
      this.page = 0;
      this.getData();
    },
    //获取明细数据
    getLog(userSaasId) {
      UserWalletLog({ userSaasId }).then(result => {
        let { walletLogList, page } = result;
        this.detailData = walleLogList;
      });
    },
    // 通过审核
    resolve() {
      let applyId = this.withdraw_apply_id;
      ApplyWithdrawResolve(applyId)
        .then(result => {
          this.$Message.success("操作成功");
          this.getData();
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 拒绝通过
    reject() {
      let applyId = this.withdraw_apply_id;
      ApplyWithdrawReject(applyId)
        .then(result => {
          this.$Message.success("操作成功");
          this.getData();
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    //获取数据
    getData() {
      let page = this.page;
      // let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      dataList.page = ++page;
      dataList.search = this.formItem;
      // dataList.pageNum = pageNum;
      // //获取查询条件
      // for (let i in formItem) {
      //   dataList[i] = formItem[i];
      // }

      ApplyWithdrawList(dataList).then(res => {
        let { list, pages } = res;
        this.data = list;
        this.pageTotal = pages;
        // this.pageTotal = page.pageTotal;
      });
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
